<!DOCTYPE html>
<html>
	<head>
		<title>3D模型展示 - Babylon.js</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}

			#renderCanvas {
				width: 100%;
				height: 100%;
				touch-action: none;
			}
		</style>
		<script src="https://cdn.babylonjs.com/babylon.js"></script>
		<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
	</head>
	<body>
		<canvas id="renderCanvas"></canvas>
		<script>
			const canvas = document.getElementById("renderCanvas");
			const engine = new BABYLON.Engine(canvas, true);

			const createScene = async function() {
				const scene = new BABYLON.Scene(engine);
				scene.clearColor = new BABYLON.Color3(0.9, 0.9, 0.9);

				// 添加相机
				const camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
				camera.attachControl(canvas, true);
				camera.wheelPrecision = 50;

				// 添加光源
				const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
				light1.intensity = 0.7;
				const light2 = new BABYLON.DirectionalLight("light2", new BABYLON.Vector3(0, -1, 1), scene);
				light2.intensity = 0.3;

				// 加载模型
				const result = await BABYLON.SceneLoader.ImportMeshAsync("", "", "sushanna.glb", scene);
				const model = result.meshes[0];

				return scene;
			}

			createScene().then(scene => {
				engine.runRenderLoop(() => {
					scene.render();
				});
			});

			window.addEventListener("resize", () => {
				engine.resize();
			});
		</script>
	</body>
</html>